<!--
CSS3
    - 兼容性问题：IE9+才支持
    - 移动端支持优于PC端（因为大多数移动端都没有兼容性问题）
    - 应用相对广泛

属性选择器
    - 属性
        E[attr]             包含attr的标签（这个attr必须在html标签中显式存在）
    - 属性值
        E[attr='val']       属性值等于val的标签（精确查询）
        E[attr^='val']      以val值开头的标签
        E[attr$='val']      以val值结尾的标签
        E[attr*='val']      含有val值的标签（模糊查询）

拓展：正则以^开头，以$结尾。

权重问题
    类选择器、伪类选择器、属性选择器：10
    .test       10
    div.test    1+10

    :hover      10
    div:hover   1+10

    [class="test"]     10
    div[class="test"]  1+10
-->
<style>
  /* --------------- E[attr] */
  input[id] {
    color: cyan;
  }

  /* --------------- E[attr='val'] */
  /* 可以不加引号：input[value=delete] */
  input[value="delete"] {
    color: red;
  }

  /* --------------- E[attr^='val'] */
  div[class^="icon"] {
    color: skyblue;
  }
  div[class^="te"] {
    color: blue;
  }

  /* --------------- E[attr$='val'] */
  section[class$="data"] {
    color: orange;
  }

  /* --------------- E[attr*='val'] */
  span[class*="ab"] {
    color: purple;
  }
</style>

<h1>E[attr]</h1>
<input type="text" value="hello" />
<input type="text" value="hello" id="" />

<h1>E[attr='val']</h1>
<input type="button" value="delete" />
<input type="button" value="update" />

<h1>E[attr^='val']</h1>
<div class="icon1">icon1</div>
<div class="icon2">icon2</div>
<div class="icon3">icon3</div>
<div class="test1">test1</div>
<div class="test2">test2</div>

<h1>E[attr$='val']</h1>
<section class="test1-data">t1-d</section>
<section class="test2-data">t2-d</section>
<section class="test3-data">t3-d</section>
<section class="test4">t4</section>
<section class="test5">t5</section>

<h1>E[attr*='val']</h1>
<ul>
  <li><span class="abc">abc</span></li>
  <li><span class="aabbcc">aabbcc</span></li>
  <li><span class="a">a</span></li>
  <li><span class="b">b</span></li>
  <li><span class="c">c</span></li>
</ul>
